<template>
  <div class="lunbotubig1">
    <!-- 导航 -->
    <div class="lunbotubigtop1">
      <!-- <van-nav-bar

  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
  class="narbar"
/> -->
<van-nav-bar class="narbar" left-text="返回"  @click-left="onClickLeft" left-arrow>
  <template #right>
    <van-icon name="search" size="22"  @click="onClickright"/>
  </template>
</van-nav-bar>
    </div>
    <!-- 内容 -->
    <div class="lunbotubigcecer">
      <div class="lunbotubigcecertop">
        <!-- 头像及关注 -->
        <div class="touxiangleft">
          <!-- 头像 -->
          <div class="touxianglefttop">
            <van-image
            round
            width="100%"
            height="100%"
            :src="require('../assets/629cdae29a3bf323e79b2662c17fe93.jpg')"
/>
          </div>
<!-- 点击关注 -->
<div class="weiweiguanz">
  <button v-if="showButton1"  @click="toggleButtonsone" class="btnguanzhu">+关注</button>
  <button v-else class="btnguanzhu"  @click="toggleButtonstwo">✔已关注</button>

</div>

        </div>
        <!-- 用户相互信息 -->

      </div>
      <div  class="lunbotubigcecerconert">墩墩官方</div>
      <div class="lunbotubigcecerbom">发布时间:</div>
<div class="lunbotubigcecermom"> 2023-06-20</div>
<!-- 在招租详情右侧的单架 -->
<!-- <div class="zhaozhudanjia">p</div> -->

    </div>
    <!-- 内容页面 -->
<div class="neirongdata">
  <div class="neirongdataone1">
    <van-image
  width="95%"
  height="210%"
  :src="require('../assets/88a6db034a86598b8ff849989ba2ce6.jpg')"
/>
  </div>
  <div class="neirongdatatop">
    <van-image
  width="95%"
  height="210%"
  :src="require('../assets/470de100df849929bb85a02ecb0ec4e.jpg')"
/>
  </div>
  <div class="neirongdatabom1">
    <van-image
  width="99%"
  height="200%"
  :src="require('../assets/e3e80172338bdeada90fe49428313c4.jpg')"
/>
  </div>
  <div class="neirongdatabom1">
    <van-image
  width="100%"
  height="200%"
  :src="require('../assets/7504fb7b2994bc0f57d0040b1083c23.jpg')"
/>
  </div>
  <div class="neirongdatabom1">
    <van-image
  width="100%"
  height="300%"
  :src="require('../assets/497d46f5214f1224d5a8c653c9a8155.jpg')"
/>
  </div>
</div>
    <!-- 底部 -->
    <div class="bigdibucard">
      <!-- 底部转发栏 -->
      <div class="zhuanfalancard">
        <div class="zhuanfalancardone">
          <van-image
          @click="showShare = true"
  width="85%"
  height="85%"
  :src="require('../assets/23d7e91499ffbf485f115654d804020.png')"
/>
<!-- 转发显示面板 -->
<van-share-sheet
  v-model="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
        </div>
        <div class="zhuanfalancardone">
          <van-image
          @click="pinlunbtn"
  width="100%"
  height="85%"
  :src="require('../assets/f25243194a2d41a4332ed10f984dbb5.png')"
/>
        </div>
        <div class="zhuanfalancardone">
          <van-image
          @click="dianzanbtn"
  width="150%"
  height="100%"
  :src="require('../assets/082572579bce931a2e259b705273d54.png')"
/>
        </div>
      </div>
      <!-- 底部收藏栏 -->
      <div class="lunbotubigbom">
        <!-- 收藏 -->
      <div class="lunbotubigbomone">
        <van-image
        @click="shouchangbtn"
  width="99%"
  height="100%"
  :src="require('../assets/16ebfd425ebc7a67a1a239e1293b070.png')"
/>
      </div>
      <!-- 电话 -->
      <div class="lunbotubigbomone">
        <van-image
        @click="showPopup"
  width="100%"
  height="100%"
  :src="require('../assets/4a99b14c9c505290697ecf0921fd5b2.png')"
/>
<van-popup v-model="show"  position="bottom" :style="{ height: '8%' }">相关电话:0421-28635</van-popup>
      </div>
      <!-- 咨询 -->
      <div class="lunbotubigbomone">
        <van-image
@click="pinlunbtn"
  width="100%"
  height="100%"
  :src="require('../assets/aec9fbc633271548b849d5530260486.png')"
/>
      </div>
    </div>
    </div>

  </div>
</template>
<script>
import { Toast, Dialog } from 'vant'
export default {
  name: '',
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      show: false,
      showButton1: true // 初始状态为显示按钮1
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/shouye')
    },
    onClickright () {
      Toast('正在开发中~~')
    },
    // 收藏成功
    shouchangbtn () {
      Toast.success('收藏成功')
    },
    dianzanbtn () {
      Toast.success('点赞成功')
    },
    // 分享面板属性
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    // 评论
    pinlunbtn () {
      Dialog.alert({
        message: '功能正在开发中~~'
      }).then(() => {
        // on close
      })
    },
    // 电话
    showPopup () {
      this.show = true
    },
    toggleButtonstwo () {
      this.showButton1 = true
      Toast.fail('已取消关注')
    },
    // 点击关注
    toggleButtonsone () {
      this.showButton1 = false
      Toast.success('已关注')
    }
  }
}
</script>
<style lang="less">
*{
  margin: 0;
  padding: 0;
  border-top:1px solid transparent

}
.weiweiguanz{
  width: 100%;
  height: 20px;
  top:100px;
  left: -138px;
  position: absolute;
 }
.lunbotubig1{
  width: 100%;
  height:360vh;
  // background-color: pink;
  // 头部返回导航栏
  .lunbotubigtop1{
    width: 100%;
    height: 35px;

 top: 0;
 position: fixed;
//  margin-bottom: 120px;
.narbar{
  // border: 1px solid #29a8e3;
  background-color: rgb(219, 218, 218);
}
  }
  // 中间内容
  .lunbotubigcecer{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
    .lunbotubigcecertop{
display: flex;
      width: 100%;
      height: 70px;
      line-height: 80px ;
      // background-color: #ccc;
      margin-bottom: 20px;

.touxiangleft{
  width: 60px;
  height: 50px;
  // background-color: pink;
  padding-left: 20px;

  .touxianglefttop{
    // margin-bottom: 10px;
    margin-top: 10px;
    width: 48px;
    height: 48px;
    // background-color:pink;
    border:2px;
    border-radius: 100%;
    // border:1px soild #888888;
    box-shadow: 5px 5px 5px #343434;
  }
   // btn
  .btnguanzhu{
      width: 65px;
      height: 25px;
      background-color:  #29a8e3;
      line-height: 25px;
      // z-index: 999;
    border-radius: 10px;
color:#fff;
border: 1px soild #29a8e3
    }

}
    }
// 右侧资料
.lunbotubigcecerconert{
  width: 80px;
  height: 20px;
  // background-color: pink;
  top: 70px;
  left: 80px;
  position: absolute;
  font-size: 16px;
  color: #29a8e3;
}
.lunbotubigcecerbom{
  width: 80px;
  height: 20px;
  // background-color: pink;
  top: 100px;
  left: 80px;
  position: absolute;
  font-size: 14px;
  color: rgb(123, 122, 122);
}
.lunbotubigcecermom{
  width: 90px;
  height: 30px;
  // background-color: pink;
  top: 130px;
  left: 85px;
  position: absolute;
  font-size: 16px;
  color:rgb(123, 122, 122);
}
// 招租价格表
.zhaozhudanjia{
  width: 90px;
  height: 50px;
  background-color: #fff;
  top: 80px;
  right: 10px;
  position: absolute;
  font-size: 16px;
  color:red
}
  }

// 图片资料data
.neirongdata{
  width: 100%;
// margin-top: 10px;
// padding-top: 20px;
}
.neirongdataone1{
  width: 100%;
  height: 120px;
  // background-color:red;
  // margin-bottom: 15px !important;
}
.neirongdatatop{
  margin-top: 90px;
  width: 100%;
  // height: 200px;
  // background-color:pink;
}
.neirongdatabom1{
  width: 100%;
  height: 200px;
  background-color: pink;
  margin-top: 10px;
  margin-bottom:200px;
}
   //底部功能栏
  .bigdibucard{
    width: 100%;
    position: fixed;
    height: 120px;
bottom: 0 !important;
background-color:#fff;
margin-top: 30px !important;
.zhuanfalancard{
  width: 100%;
  height: 30px;
  // background-color: pink;
// border-top: 1px solid #ccc;
margin-bottom: 30px;
display: flex;
.zhuanfalancardone{
  width: 50px;
  height: 50px;
  // background-color: #fff;
  padding: 0 15px;
  margin: 0 20px;
}
}
    .lunbotubigbom{
    display: flex;
width: 75%;
height: 45px;
line-height: 45px;
margin-left: 12%;

// background-color:#29a8e3;
border-radius: 10px;
margin-bottom: 10px;
border: 1px solid #29a8e3;
box-shadow: 5px 5px 5px #888888;
// justify-content: center;
// text-align: center;
.lunbotubigbomone{
    width: 40px;
    height: 35px;
    line-height: 35px;
    // background-color:pink;
    padding: 0 20px;
    margin: 3px 10px;

  }
  }
  }

}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    // line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
  }
</style>
